<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="renderer" content="webkit">
  <title>滑块功能</title>
  <link href="assets/js/slidercaptcha/slidercaptcha.min.css" rel="stylesheet">

  <style>
    .sliderIcon {
      display: none;
    }

    .slider,
    .sliderContainer,
    .sliderbg {
      border-radius: 0;
    }

    .sliderText {
      font-family: "微软雅黑";
    }

    .slider {
      box-shadow: none;
      border: 1px solid rgba(0, 0, 0, .1);
      background-image: url("") !important;
      background-position: center center !important;
      background-repeat: no-repeat !important;
    }

    .sliderContainer_active .slider,
    .sliderContainer_fail .slider,
    .sliderContainer_success .slider,
    .slider:hover {
      background-image: url("") !important;
    }

    .sliderImageContainer {
      position: absolute;
      bottom: 100%;
      width: 100%;
      /* margin-bottom: 8px; */
    }
  </style>

</head>

<body>

  <div style="width:400px;margin:0 auto;padding-top: 60px;">
    <div>账号</div><!-- 测试用，可删除 -->
    <div>密码</div><!-- 测试用，可删除 -->
    <div id="captcha"></div>
  </div>

  <script src="assets/js/jquery/jquery.min.js"></script>
  <script src="assets/js/slidercaptcha/slidercaptcha.min.js"></script>
  <script>

    $(function () {
      $('#captcha').sliderCaptcha({
        width: 400,
        height: 100,
        barText: '>>>向右滑动填充拼图>>>',
        setSrc: function () {
          // return 'http://images.sdgxgz.com/Pic' + Math.round(Math.random() * 136) + '.jpg'; //随机图片
          return 'https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF'; //测试图片
        },
        onSuccess: function () {
          // window.location.href = 'https://gitee.com/LongbowEnterprise/SliderCaptcha';
          alert('验证通过!');
        }
      });
    });
    $(function () {
      $('.sidebar-toggle').click(function (e) {
        e.preventDefault()
        $('.skeleton').toggleClass('skeleton-sidebar-expanded');
        window.dispatchEvent(new Event('resize'));

      })
    });
    $(function () {
      $('.sliderImageContainer').hide()
      $('.slider').mousedown(function () {
        $('.sliderImageContainer').show()
      })
    })

  </script>

</body>

</html>